import React, { useState } from 'react'
import styles from './index.module.scss'
import Icon from '@/components/Icon'
import { useDispatch, useSelector } from 'react-redux'
// import { differenceBy } from 'lodash'
import differenceBy from 'lodash/differenceBy'
import classnames from 'classnames'
import { addChannel, delChannel } from '@/store/actions/home'
import { Toast } from 'antd-mobile'

export default function Channels({ onClose, index, onChange }) {
	const userChannels = useSelector((state) => state.home.userChannels)
	const [editing, setEditing] = useState(false)
	const dispatch = useDispatch()
	const recommendChannels = useSelector((state) => {
		const { userChannels, allChannels } = state.home
		return differenceBy(allChannels, userChannels, 'id')
		/* return allChannels.filter((item) => {
			return userChannels.findIndex((v) => v.id === item.id) === -1
		}) */
	})

	const changeChannel = (i) => {
		if (editing) return
		onChange(i)
		onClose()
	}

	const del = async (item, i) => {
		if(userChannels.legnth <= 4) {
			Toast.info('至少保留4个频道')
			return
		}
		
		await dispatch(delChannel(item))
		Toast.success('删除成功', 1)
		// 1. 如果删除的 i 和 index 相等, 默认让推荐 0 高亮
		// 2. 如果删除的 i 小于 index, 默认让 i - 1 高亮
		// 3. 如果删除的i 大于index 不用处理
		if(i === index) {
			onChange(0)
		}
		if(i < index) {
			onChange(index - 1)
		}
	}

	const add = async (item) => {
		await dispatch(addChannel(item))
		Toast.success('添加成功', 1)
	}

	return (
		<div className={styles.root}>
			<div className="channel-header">
				<Icon type="iconbtn_channel_close" onClick={onClose}></Icon>
			</div>

			<div className="channel-content">
				<div
					className={classnames(
						'channel-item',
						editing ? 'edit' : ''
					)}
				>
					<div className="channel-item-header">
						<span className="channel-item-title">我的频道</span>
						<span className="channel-item-title-extra">
							{editing ? '点击删除频道' : '点击进入频道'}
						</span>
						<span
							className="channel-item-edit"
							onClick={() => {
								setEditing(!editing)
							}}
						>
							{editing ? '完成' : '编辑'}
						</span>
					</div>

					<div className="channel-list">
						{userChannels.map((item, i) => (
							<span
								key={item.id}
								className={classnames(
									'channel-list-item',
									i === index ? 'selected' : ''
								)}
								onClick={() => changeChannel(i)}
							>
								{item.name}
								{item.id !== 0 && (
									<Icon
										onClick={() => del(item, i)}
										type="iconbtn_tag_close"
									/>
								)}
							</span>
						))}
					</div>
				</div>

				<div className="channel-item">
					<div className="channel-item-header">
						<span className="channel-item-title">频道推荐</span>
						<span className="channel-item-title-extra">
							点击推荐频道
						</span>
					</div>
					<div className="channel-list">
						{recommendChannels.map((item) => (
							<span key={item.id} className="channel-list-item" onClick={() => add(item)}>
								+ {item.name}
								<Icon type="iconbtn_tag_close" />
							</span>
						))}
					</div>
				</div>
			</div>
		</div>
	)
}
